<template>
    <div class="Notice_edit">
        <div class="header"><img class="return_img" src="@/assets/Return.png" style="width:.23rem;height:.4rem;" v-on:click="back()">会议须知编辑</div>
        <div class="content">
            <div class="address">
                <div class="title">
                  <span>会</span><span>议</span><span>主</span><span>题：</span>
                </div>
                <input class="time_cont" type="text" v-model="theme" maxlength="20">
            </div>
            <div class="address">
                 <!-- <datetime-range title="会议开始时间" start-date="2019-01-01" end-date="2019-12-30" format="YYYY-MM-DD" v-model="startTime" @on-change="onChange_startTime">          
                 </datetime-range> -->
                <datetime-range title="<span>会</span><span>议</span><span>开</span><span>始</span><span>时</span><span>间：</span>" :start-date="mStartTime" :end-date="mEndTime" format="YYYY-MM-DD" v-model="startTime" @on-change="onChange_startTime">          
                 </datetime-range>
                <span class="time_fot"><img src="../../../assets/met_calendar.png" alt=""></span>
            </div>
            <div class="address">
                <datetime-range title="<span>会</span><span>议</span><span>结</span><span>束</span><span>时</span><span>间：</span>" :start-date="mStartTime" :end-date="mEndTime" format="YYYY-MM-DD" v-model="endTime" @on-change="onChange_endTime">          
                </datetime-range>
                <span class="time_fot"><img src="../../../assets/met_calendar.png" alt=""></span>
            </div>
            <div class="address">
                <div class="title"><span>会</span><span>议</span><span>地</span><span>址：</span></div>
                <span class="time_cont">{{address}}</span>
            </div>
            <vue-html5-editor :content="content" :height="400" @change="updateData" :z-index="1000" :auto-height="true"></vue-html5-editor> 
            <div class="footer">
                <x-button type="primary" @click.native="btn" class="btn">保存提交</x-button> 
            </div>
        </div>
        <toast v-model="showPositionValue_theme" type="text" :time="800" is-show-mask text="请输入会议主题" width="3.6rem"></toast>
        <toast v-model="showPositionValue_address" type="text" :time="800" is-show-mask text="请输入会议地址" width="3.6rem"></toast>
        <toast v-model="showPositionValue_time" type="text" text="开始时间不能大于结束时间" width="4.6rem"></toast> 
        <toast v-model="showPositionValue_sure" type="text" text="保存成功" width="4.6rem"></toast>
    </div>
</template>
<script>
import { XButton, XTextarea, Group, DatetimeRange, Toast } from "vux";
import { updateMeetingNotice } from "@/service/meeting.js";
import { format } from "@/service/util.js";
export default {
  components: { XButton, XTextarea, Group, DatetimeRange, Toast },
  data() {
    return {
      publish: JSON.parse(localStorage.getItem("publish")),
      theme: "",
      address: "",
      endTime: "",
      startTime: "",
      mEndTime: "",
      mStartTime: "",
      showPositionValue_theme: false,
      showPositionValue_address: false,
      showPositionValue_time: false,
      showPositionValue_sure: false,
      content: "请输入文章内容",
      mOrderId: ""
    };
  },
  created() {
    this.theme = this.publish.theme;
    this.address = this.publish.address;
    this.content = this.publish.content;
    this.endTime = format(this.publish.endTime, "yyyy-MM-dd,hh,mm");
    this.startTime = format(this.publish.startTime, "yyyy-MM-dd,hh,mm");
    this.mEndTime = format(this.publish.mEndTime, "yyyy-MM-dd");
    this.mStartTime = format(this.publish.mStartTime, "yyyy-MM-dd");
    this.startTime = this.startTime.split(",");
    this.endTime = this.endTime.split(",");
    this.mOrderId = sessionStorage.getItem("mOrderId");
  },
  methods: {
    updateData(e = "") {
      console.log(e)
      this.content = e;
    },
    btn() {
      if (this.theme == "") {
        this.showPositionValue_theme = true;
        return false;
      }
      if (this.address == "") {
        this.showPositionValue_address = true;
        return false;
      }
      var endTime = this.endTime.join(",");
      var startTime = this.startTime.join(",");
      var startTmp = this.startTime.join("");
      var endTmp = this.endTime.join("");
      var str = parseFloat(startTmp.replace(/-/g, ""));
      var etr = parseFloat(endTmp.replace(/-/g, ""));
      // 比较须知开始时间和须知结束时间
      if (str > etr) {
        this.showPositionValue_time = true;
        return false;
      }
      var data = {
        mOrderId: this.mOrderId,
        startTime: startTime,
        endTime: endTime,
        theme: this.theme,
        address: this.address,
        content: this.content
      };
      updateMeetingNotice(data).then(res => {
        if (res.data.errCode == 0) {
          this.showPositionValue_sure = true;
          setTimeout(() => {
            var android = sessionStorage.getItem("android");
            if (android) {
              this.$router.go(-1); //返回上一层
            } else {
              this.$router.push("/my/Meeting/Notice");
            }
          }, 2000);
        }
      });
    },
    onChange_startTime(val) {
      this.startTime = val.join(","); //abcde
    },
    onChange_endTime(val) {
      this.endTime = val.join(","); //abcde
    },
    back() {
      this.$router.go(-1); //返回上一层
    }
  }
};
</script>
<style lang="less">
.Notice_edit {
  .vue-html5-editor {
    .content {
      width: 7rem;
      min-height: 4.5rem !important;
      // height: 6.84rem;
      border: 1px solid rgba(221, 221, 221, 1);
      border-radius: 10px;
      margin: 0.27rem auto;
    }
    img {
      max-width: 100%;
    }
  }
  .weui-cell__hd {
    width: 2.1rem;
    float: left;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    // margin-right: 0.2rem;
    .weui-label {
      display: flex !important;
      width: 100% !important;
      white-space: nowrap;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      span {
        display: block;
      }
    }
  }
  .vux-cell-primary {
    flex: none;
    float: left;
    .vux-popup-picker-select {
      width: 5rem;
      text-align: left !important;
      z-index: 100;
    }
  }
  .vue-html5-editor > .toolbar {
    z-index: 100 !important;
  }
}
</style>
<style scoped lang="less">
.Notice_edit {
  .header {
    height: 0.88rem;
  }
  .content {
    margin-top: 0.1rem;
    background: #fff;
    .time_cont {
      width: 4rem;
      display: inline-block;
      border: none;
      outline: medium;
    }
    .times {
      margin-left: 0.1rem;
    }
    .hed {
      height: 1.36rem;
      padding: 0.26rem 0;
      text-align: center;
      border-bottom: 1px solid rgba(243, 243, 243, 1);
      p {
        height: 0.34rem;
        font-size: 0.36rem;
        font-family: PingFang-SC-Medium;
        color: rgba(38, 38, 38, 1);
        line-height: 0.28rem;
        margin-bottom: 0.19rem;
      }
      span {
        height: 0.28rem;
        font-size: 0.3rem;
        font-family: PingFang-SC-Medium;
        color: rgba(154, 154, 154, 1);
        line-height: 0.28rem;
      }
    }
    .address {
      width: 7.25rem;
      margin-left: 0.25rem;
      height: 0.9rem;
      line-height: 0.9rem;
      font-size: 0.3rem;
      color: rgba(38, 38, 38, 1);
      border-bottom: 1px solid rgba(243, 243, 243, 1);
      position: relative;

      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      .title {
        width: 2.1rem;
        white-space: nowrap;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        span {
          display: block;
        }
      }
      .time_fot {
        position: absolute;
        top: 0;
        right: 0.5rem;
        img {
          width: 0.35rem;
          height: 0.38rem;
        }
      }
    }

    .detail {
      width: 7rem;
      height: 6.84rem;
      border: 1px solid rgba(221, 221, 221, 1);
      border-radius: 0.1rem;
      margin: 0 auto;
      margin-top: 0.27rem;
      padding: 0.11rem 0.19rem 0.15rem 0.17rem;
      .weui-textarea {
        height: 6rem;
      }
    }
    .footer {
      line-height: 0.8rem;
      margin: 0.59rem 0.25rem 0 0.25rem;
      text-align: center;
      .met_btn {
        margin-right: 0.9rem;
      }
      .btn {
        width: 3rem;
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.3rem;
        background: rgba(135, 42, 145, 1) !important;
        border-radius: 0.08rem !important;
        display: inline-block;
        margin-bottom: 0.29rem;
      }
    }
  }
}
</style>
